<template>
  <div class="line-detail-layout" v-if="lineDetail.stops.length">
    <header class="bus-detail">
      <div class="bus-state">
        <span class="start">{{lineDetail.startStopName}}</span>
        <i class="fa fa-long-arrow-right arrow" aria-hidden="true"></i>
        <span class="end">{{lineDetail.endStopName}}</span>
      </div>
      <div class="bus-work">
        <span class="start">首</span>
        <span class="time">{{lineDetail.firstTime}}</span>
        <span class="end">末</span>
        <span class="time">{{lineDetail.lastTime}}</span>
        <span class="price">票价：{{lineDetail.price}}元</span>
      </div>
      <div class="bus-msg clearfix">
        <div class="bus fl">
          <p class="num">{{commingBusArray[0].distance}}</p>
          <p class="msg">第1辆抵达</p>
        </div>
        <div class="bus fl">
          <p class="num">{{commingBusArray[1].distance}}</p>
          <p class="msg">第2辆</p>
        </div>
      </div>
    </header>
    <section class="bus-list">
      <div class="site">
        <ul class="site-list clearfix" :style="{width:`${lineDetail.stops.length*0.96}rem`}">
          <li class="site-item fl" v-for="(item,index) in lineDetail.stops" @click="choseSite(item)">
            <i class="icon-to"></i>
            <i class="icon-bus comming" v-show="item.busComming"></i>
            <i class="icon-bus" v-show="item.busArrive"></i>
            <i class="icon-location" v-show="item.nearest"></i>
            <i class="icon-arrow" v-show="item.isChoice"></i>
            <p class="name"
               :style="item.isBeforeCurrentChoiceNode?'color:#0AB3F1':(item.isChoice?'color:red':'color:#5e5e5e')">
              {{item.stopName}}</p>
          </li>
        </ul>
      </div>
    </section>
    <footer class="bus-tool">
      <vBanner :isFresh="lineDetailConfig.isFresh" :isRide="lineDetailConfig.isRide" :isBanner="lineDetailConfig.isBanner"></vBanner>
      <ul class="menu">
        <li @click="lineCollect"><i class="icon-menu1" :class="{'menu1':lineDetail.isFavorite}"></i></li>
        <li @click="lineDirection"><i class="icon-menu2"></i></li>
        <li @click="lineSet"><i class="icon-menu3"></i></li>
        <li @click="onReady"><i class="icon-menu4"></i></li>
      </ul>
    </footer>
  </div>
</template>
<script>
  import vBanner from '../components/banner/banner.vue'
  import {getLocation, banner, showToast} from '../utils/public'
  import {getDetail, lineCollect, myCollect} from '../utils/http'

  export default {
    data() {
      return {
        lineDetail: {
          stops: []
        },
        commingBusArray: [
          {distance: "未发车"},
          {distance: "未发车"}
        ],
        params: {
          lineId: ''
        }
      }
    },
    computed: {
      lineDetailConfig() {
        return global.lineConfig.lineDetail
      }
    },
    components: {
      vBanner
    },
    mounted() {
      let lineDetail = JSON.parse(localStorage.getItem('lineDetail'))
      if (lineDetail) {
        this.params.lineId = lineDetail.lineId
        this.params.direction = lineDetail.direction
        this.onReady()
      } else {
        showToast({message: '未选择线路', duration: 1500})
      }
    },
    methods: {
      // 初始化
      onReady() {
        getLocation((Lng, Lat) => {
          if (Lat && Lng) {
            this.params.latitude = Lat
            this.params.longitude = Lng
          }
          getDetail({
            lineId: this.params.lineId,
            latitude: this.params.latitude,
            longitude: this.params.longitude,
            clickStopName: this.params.clickStopName,
            clickStopOrder: this.params.clickStopOrder,
            cb: (data, array) => {
              this.params.lineId = data.lineId
              this.params.direction = data.direction
              this.lineDetail = data
              this.commingBusArray = array
              this.isCollect()
            }
          })
        })
      },
      // 选择站点
      choseSite(item) {
        this.params.clickStopName = item.stopName
        this.params.clickStopOrder = item.stopOrder
        getDetail({
          lineId: this.params.lineId,
          latitude: this.params.latitude,
          longitude: this.params.longitude,
          clickStopName: this.params.clickStopName,
          clickStopOrder: this.params.clickStopOrder,
          cb: (data, array) => {
            this.params.lineId = data.lineId
            this.params.direction = data.direction
            this.lineDetail = data
            this.commingBusArray = array
            this.isCollect()
          }
        })
      },
      // 换向
      lineDirection() {
        if (this.lineDetail.line2Id) {
          this.params.lineId = this.lineDetail.line2Id
        } else {
          let arr = this.params.lineId.split('-')
          if (arr.length === 4) {
            this.params.lineId = arr[0] + '-' + arr[2] + '-' + arr[3]
          } else {
            this.params.lineId = arr[0] + '--' + arr[1] + '-' + arr[2]
          }
        }
        getDetail({
          lineId: this.params.lineId,
          latitude: this.params.latitude,
          longitude: this.params.longitude,
          clickStopName: this.params.clickStopName,
          clickStopOrder: this.params.clickStopOrder,
          cb: (data, array) => {
            this.params.lineId = data.lineId
            this.params.direction = data.direction
            this.lineDetail = data
            this.commingBusArray = array
            this.isCollect()
          }
        })
      },
      // 判断是否收藏线路
      isCollect() {
        myCollect({
          cb: (data) => {
            if (data.length > 0) {
              data.forEach((v, i) => {
                if (v.lineId === this.params.lineId) {
                  this.lineDetail.isFavorite = true
                }
              })
            }
          }
        })
      },
      // 线路收藏
      lineCollect() {
        let url
        if (this.lineDetail.isFavorite === true) {
          url = 'myMove'
        } else {
          url = 'mySave'
        }
        lineCollect({
          url: url,
          lineId: this.params.lineId,
          lineNo: this.params.lineNo,
          direction: this.params.direction,
          clickStopName: this.params.clickStopName,
          cb: (data) => {
            if (url === 'myMove') {
              showToast({message: '取消成功！', duration: 500})
            } else {
              showToast({message: '收藏成功！', duration: 500})
            }
            getDetail({
              lineId: this.params.lineId,
              latitude: this.params.latitude,
              longitude: this.params.longitude,
              clickStopName: this.params.clickStopName,
              clickStopOrder: this.params.clickStopOrder,
                cb: (data, array) => {
                this.params.lineId = data.lineId
                this.params.direction = data.direction
                this.lineDetail = data
                this.commingBusArray = array
                this.isCollect()
              }
            })
          }
        })
      },
      lineSet() {
        localStorage.setItem('lineSet', JSON.stringify(this.lineDetail))
        this.$router.push({path: '/lineSet'})
      }
    },
    updated() {
      banner(this.lineDetail.stops.length,this.params.clickStopOrder)
    }
  }
</script>
<style scoped>
  @import "../assets/css/lineDetail.css";
</style>
